<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn iconfont icon-return" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				欢迎回来！
			</view>
			<view class="input-content" v-if="gConfig.common_user_is_mandatory_bind_mobile=='1'">
				<form @submit="formSubmit1">
					<view class="input-item">
						<text class="tit">手机号码</text>
						<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
					</view>
					<view class="input-item">
						<text class="tit">密码</text>
						<input type="mobile" value="" placeholder="8-18位不含特殊字符的数字、字母组合" placeholder-class="input-empty" maxlength="20"
						 password data-key="password" @input="inputChange" @confirm="toLogin" />
					</view>
					<button form-type="submit" class="confirm-btn">注册登录</button>
					<view class="forget-section">
						<text>忘记密码？</text><text>注册协议</text>
					</view>
				</form>
				
			</view>
			<view class="input-content" v-else>
				<form @submit="formSubmit2">
					<view class="input-item">
						<text class="tit">用户名</text>
						<input type="text" value="" 
								placeholder="用户名2~18位,字母数字下划线" 
								maxlength="18" @input="inputChange" name="username" />
					</view>
					<view class="input-item">
						<text class="tit">密　码</text>
						<input type="text" value="" 
							placeholder="6~18位密码" 
							placeholder-class="input-empty" 
							maxlength="18"
							name="password"
							password 
							@input="inputChange" 
							@confirm="toLogin" />
					</view>
					
					<view class="yanzheng">
						<move-verify @result='verifyResult' :offsetX="offsetX"></move-verify>
					</view>
					<button form-type="submit" class="confirm-btn">注册登录</button>
					<view class="forget-section">
						<text>忘记密码？</text><text v-if="gConfig.home_is_enable_userregister_agreement=='1'" @tap="openAgreement">注册协议</text>
					</view>
					
				</form>
				<!-- 第三方登录H5不支持，所以隐藏掉 -->
				<!-- #ifndef H5 -->
				<view class="third-wapper">
					<view class="third-line">
						<view class="single-line">
							<view class="line"></view>
						</view>
						<view class="third-words">
							第三方账号登录
						</view>
						<view class="single-line">
							<view class="line"></view>
						</view>
					</view>
					<view class="third-icos-wapper">
						<!-- 5+app 用QQ登录 小程序用微信小程序登录 h5不支持-->
						<!-- #ifdef APP-PLUS -->
								<image src="/static/icon/weixin.png" class="third-ico" data-logintype="weixin" @tap="appOAuthLogin"></image>
								<image src="/static/icon/QQ.png" class="third-ico" style="margin-left: 80rpx;" data-logintype="qq"  @tap="appOAuthLogin"></image>
								<!-- <image src="/static/icon/weibo.png" class="third-ico" style="margin-left: 80rpx;" data-logintype="weibo" @tap="appOAuthLogin"></image> -->
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
								<button open-type='getUserInfo' @getuserinfo="wxLogin">
									<image src="/static/icon/weixin.png"  class="third-btn-ico"></image>
								</button>
						<!-- #endif -->
					</view>
				</view>
				<!-- #endif -->
			</view>

		</view>
		<!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
	</view>
</template>

<script>
	import moveVerify from '@/components/moveVerify.vue'
	export default {
		components:{
			moveVerify,
		},
		data() {
			return {
				offsetX:0, //滑块验证
				verifyData:{}, //滑块验证
				mobile: '',
				password: '',
				logining: false,
				gConfig: []
			}
		},
		onLoad() {
			// 取出全局配置信息
			this.gConfig = uni.getStorageSync("gConfig");

		},
		methods: {
			/* 校验成功的回调函数 */
			verifyResult(res){
				this.verifyData = res;
			},
			// 打开注册协议
			openAgreement(){
				uni.navigateTo({
					url: '/pages/member/agreement',
				});
			},
			// 用户名密码登录
			formSubmit2(e){
				var self=this;
				var username=e.detail.value.username;
				var password=e.detail.value.password;
				var userParam={
					data:{
						accounts:username, //账号
						pwd:password,  //密码
						type:'username'  //注册类型：用户名，邮箱，手机 三种类型
					}
				};
				if(username!=='' && password !== ''){
					// 实现一键注册登录，先判断用户名是否存在，存在执行登录操作，不存在执行，先注册，后登陆操作
					//滑块验证成功
					if(this.verifyData.flag){
						var loginUrl=this.requestUrl.login;
						this.util.request(loginUrl,'post',function(res){
							if(res.data.code==0){
								// 保存用户信息到全局的缓存中
								uni.setStorageSync("gUserInfo", res.data.data.user_info);
								uni.showToast({
									title: res.data.msg,
									duration: 1500,
									success:function(){
										setTimeout(function(){
											uni.switchTab({
												url: '/pages/member/member',
											})
										
										},1500)
									}
								});
							}else{
								uni.showToast({
								    title: '登录失败',
									image:'/static/icon/error.png',
								    duration: 1500,
									success:function(){
										setTimeout(function(){
											uni.redirectTo({
												url: '/pages/member/login',
											});
										},1500)
									}
								});
							}
						},userParam);
					}else{
						uni.showToast({
							title: '请验证',
							image:'/static/icon/error.png',
							duration: 1500
						});
					}
					
				}else{
					uni.showToast({
					    title: '账号或密码为空',
						image:'/static/icon/error.png',
					    duration: 1500
					});
				}
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.switchTab({
					url:'./member'
				})
			},
			// 实现在微信小程序端的微信登录
			wxLogin(e){
				var self=this;
				// 通过微信开放能力，获得微信用户的基本信息
				var userInfo = e.detail.userInfo;
				uni.login({
					provider: 'weixin',
					success: res => {
						// 获得微信登录的code:授权码
						var code=res.code;
						if(code){
							var wxappLoginUrl=self.requestUrl.wxappLogin;
							var wxParam={
								data:{
									authcode:code,
								}
								
							}
							self.util.request(wxappLoginUrl,'post',function(result){
								if(result.data.code==0){
									// 保存用户信息到全局的缓存中
									uni.setStorageSync("gUserInfo", result.data.data);
									uni.showToast({
									    title: '登录成功',
									    duration: 1500,
										success:function(){
											setTimeout(function(){
												uni.redirectTo({
													url: './me',
												});
											},1500)
										}
									});	
								}else{
									uni.showToast({
										title: '登录失败',
										image:'/static/icon/error.png',
										duration: 1500
									});
								}
							},wxParam)
						}
						
					}
				});
			},
			// app登录
			appOAuthLogin(e){
				var logintype=e.currentTarget.dataset.logintype;
				var self=this;
				// 授权登录
				uni.login({
					provider: logintype,
					success: res => {
						// 授权登录成功以后，获取用户信息
						uni.getUserInfo({
							provider:logintype,
							success: (info) => {
								var userInfo=info.userInfo;
								var thirdLoginUrl=self.requestUrl.thirdLogin;
								let loginParam={
									data:{
										logintype:logintype,
										userinfo:JSON.stringify(userInfo)
									}
								}
								this.util.request(thirdLoginUrl,'post',function(response){
									if(response.data.code==0){
										// 保存用户信息到全局的缓存中
										uni.setStorageSync("gUserInfo", response.data.data.user_info);
										uni.showToast({
										    title: response.data.msg,
										    duration: 1500,
											success:function(){
												setTimeout(function(){
													uni.switchTab({
														url: './member',
													})
												},1500)
											}
										});
									}else{
										uni.showToast({
											title: response.data.msg,
											image:'/static/icon/error.png',
											duration: 1500
										});
									}
								},loginParam)

							
							}
						})
					},
					fail: () => {},
					complete: () => {}
				});
			},

		},

	}
</script>

<style lang='scss' scoped>
	page {
		background: $uni-bg-color;
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: $uni-bg-color;
		box-sizing: border-box;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: $uni-bg-color;
		padding-bottom: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 70upx;
		color: $uni-text-color;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $uni-bg-color-grey;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60upx;
	}
	.yanzheng{border:solid 1px $uni-border-color}
	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $uni-bg-color-grey;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $uni-font-size-sm+2upx;
			color: $uni-font-size-base;
		}

		input {
			height: 60upx;
			font-size: $uni-font-size-base + 2upx;
			color: $uni-text-color;
			width: 100%;
		}
		/* 验证码 */
		.yanzhengma{width:100%;display: flex;flex-direction: row;}
		.inputCaptcha{width:360rpx;}
		.captcha{width:200rpx;height:60upx;}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-bg-color-zhu;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $uni-font-size-sm+2upx;
		color: $uni-text-color-grey;
		text-align: center;
		margin-top: 40upx;
		text{
			padding:0 30rpx;
		}
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $uni-font-size-sm+2upx;
		color: $uni-font-size-base;
		text-align: center;

		text {
			color: $uni-text-color-grey;
			margin-left: 10upx;
		}
	}
	
	/* 第三方登录 */
	.third-wapper{width:100%;margin-top: 60rpx;}
	.third-line{display: flex;flex-direction: row;justify-content: centent;}
	.third-words{color: #A9A9A9;font-size: 26rpx;width:100%;text-align: center;}
	.single-line{padding:15rpx 20rpx;width:36%;align-items: center;}
	.third-icos-wapper{margin-top: 30rpx;display: flex;flex-direction: row;justify-content: center;}
	.third-ico{width:60rpx;height: 60rpx;}
	.third-btn-ico{width:60rpx;height: 60rpx;background-color: white;background-size: 60rpx 60rpx;background-repeat: no-repeat;border:none;padding:0;}
	button::after{border: none;}
	.submit{background: $uni-bg-color-zhu;color: $uni-text-color-inverse;}
</style>
